<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>WebOficina</title>
    </h:head>
    <h:body>
        <h:form>
            <title>Cadastro de Cidade</title>

            <p:menubar>
                <p:submenu label="Cadastro">  
                    <p:menuitem value="Cidades" url="cidade.jsf"/>
                    <p:menuitem value="Clientes" url="cliente.jsf"/>
                    <p:menuitem value="Funcionários" />
                    <p:menuitem value="Serviços e Peças" />
                </p:submenu>  
                <p:submenu label="Movimento">  
                    <p:menuitem value="Serviços" />
                </p:submenu>  
                <p:submenu label="Relatórios">  
                    <p:menuitem value="Ordem de Serviço" />
                </p:submenu>  
                <p:submenu label="Avançado">  
                    <p:menuitem value="Usuário" />
                </p:submenu>  
            </p:menubar>

            <div id="divCabecalho" style="font-size: 18px;" class="ui-widget ui-widget-header ui-corner-all">
                <p align="center"> Cadastro de Cidade </p>
            </div>

            <p:dataTable id="table" var="cidade" value="#{cidadecontroller.listCidade}" rowKey="#{cidade.id}" paginator="true" rows="10" selectionMode="single">

                <p:column headerText="ID" sortBy="#{cidade.id}" filterBy="#{cidade.id}" id="id">  
                    #{cidade.id}
                </p:column>

                <p:column headerText="Nome" sortBy="#{cidade.nome}" filterBy="#{cidade.nome}" id="nome">  
                    #{cidade.nome}
                </p:column>

                <p:column headerText="UF" sortBy="#{cidade.uf}" filterBy="#{cidade.uf}" id="uf">
                    #{cidade.uf}
                </p:column>

            </p:dataTable>

            <p:toolbar style="font-size: 11px;">
                <p:toolbarGroup align="left" style="font-size: 11px;">  
                    <p:commandButton type="button" value="Inserir" icon="ui-icon-pencil" title="Clique para inserir um novo registro" onclick="dlg1.show();"/>
                    <p:separator />
                    <p:commandButton type="button" value="Alterar" icon="ui-icon-pencil" title="Clique para alterar o registro selecionado"/>
                    <p:separator />
                    <p:commandButton type="button" value="Excluir" icon="ui-icon-trash" title="Clique para excluir o registro selecionado"/>
                    <p:separator />
                    <p:commandButton type="button" value="Imprimir" icon="ui-icon-print" title="Clique para imprimir a grade"/>
                    <p:separator />
                    <p:commandButton type="button" value="Atualizar" icon="ui-icon-refresh" title="Clique para atualizar a grade"/>
                </p:toolbarGroup>
            </p:toolbar>

            <p:dialog id="dialog" header="Inserir cidade" widgetVar="dlg1" modal="true" resizable="false">  
                <h:panelGrid columns="2" style="margin-bottom:10px">  
                    <h:outputLabel for="id" value="Id:" />  
                    <p:inputText id="id" value="#{cidadecontroller.cidade.id}" readonly="true" />  
                    <h:outputLabel for="nome" value="Nome:" />  
                    <p:inputText id="nome" value="#{cidadecontroller.cidade.nome}" />  
                    <h:outputLabel for="uf" value="UF:" />  
                    <p:inputText id="uf" value="#{cidadecontroller.cidade.uf}" />  

                    <p:toolbar style="font-size: 11px;">
                        <p:toolbarGroup align="left" style="font-size: 11px;">  
                            <p:commandButton type="button" value="Gravar" icon="ui-icon-pencil" title="Clique para gravar" action="#{cidadecontroller.gravar}"/>
                            <p:separator />
                            <p:commandButton type="button" value="Fechar" icon="ui-icon-exit" title="Clique para fechar" onclick="dlg1.hide()"/>
                            <p:separator />
                        </p:toolbarGroup>
                    </p:toolbar>
                </h:panelGrid> 
            </p:dialog>  

        </h:form>  
    </h:body>
</html>